<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>

<html>
   <head>
	   <script>
	   
		  function processURL() {
		    document.getElementById("answercheckblock").innerHTML = '';
			var operation = getCheckedRadio("operation");
			if(operation.length == '') {
			   alert('Please select the operation');
			   return;
			}  	
			url = '/lwf/basicmath.do?action=selectoperation&operation=' + operation;
		    retrieveURL(url, 'questionblock');
		  }	   
		  
		  function checkAnswer() {
		  	var userans = document.basicmath.useranswer.value;
			url = '/lwf/basicmath.do?action=checkanswer&useranswer=' + userans;
		    retrieveURL(url, 'answercheckblock');
		  } 
		  
	   </script>
   </head>
   <form name="basicmath">
   <table border="0" align="center" width="100%" bordercolor="red">
       <tr>
           <td class="title">Basic Mathematics</td>
       </tr> 
       <tr>
           <td>&nbsp;</td>
       </tr> 
       <tr>
           <td>
               <table border="0" width="100%">
                  <tr>
                      <td width="28%" class="heading1" nowrap><b>Select an operation:</b></td>
	                  <td width="3%"><input type="radio" value="add" name="operation" onclick="processURL()"/></td>
	                  <td width="8%" class="leftlabel">Add</td>
	                  <td width="3%"><input type="radio" value="subtract" name="operation" onclick="processURL()"/></td>
	                  <td width="8%" class="leftlabel">Subtract</td>
	                  <td width="3%"><input type="radio" value="count" name="operation" onclick="processURL()"/></td>
	                  <td width="8%" class="leftlabel">Count</td>  
	                  <td width="3%">&nbsp;</td> 
	                  <td width="8%" class="leftlabel">&nbsp;</td>
	                  <td width="33%" nowrap>&nbsp;</td>
	               </tr>
               </table>
           </td>
       </tr>         
       <tr>
           <td>
               <table border="0" width="100%">
                  <tr>
                      <td align="center">
                         <span id="answercheckblock"></span>
                      </td>
                  </tr>
                  <tr>
                      <td>
                         <span id="questionblock"></span>
                      </td>
                  </tr>                  
               </table>
           </td>
       </tr> 
   </table>  
</form>
</html>